import React, { useEffect, useState } from "react";
import { Button, Form, Input, Modal,message  } from 'antd';
import styled from "styled-components";
import "./LoginRegiestModal.scss"
import { useLocation } from 'react-router-dom';
import { handleResponse } from "@utils/handle-reponse";
import HouseApi from "@apis/house";
/**
 * 登录注册模态框
 * @constructor
 */
const ReportModal = ({ visible, onCancel,onOk }) => {
    const [messageApi, contextHolder] = message.useMessage();

    const $route = useLocation()
    const pathId = () => {
        return $route.pathname.split('/').pop();
    }
    const [formData, setFormData] = useState({
        houseId: pathId(),
        text: ''
    });
    const handleSub = (e) => {
        e.preventDefault();
        if (formData.text == '' || formData.text == null) {
            messageApi.info('内容不能为空');
            return;
        }
        // 请求
        handleResponse(HouseApi.getReport(formData), (data) => {
            if (data) {
                messageApi.success("举报成功")
                formData.text = ''
                onOk()
            }
        }, "举报失败");
    }
    const handleChangeValue = (e) => {
        const { value } = e.target;
        setFormData((olddata) => {
            return {
                ...olddata,
                text: value
            }
        })
    }
    const autoHeight = (e) => {
        e.target.style.height = 'auto'
        e.target.style.height = e.target.scrollHeight + 'px'
    }

    return (
        <Modal
            onCancel={onCancel}
            centered={true}
            visible={visible}
            title={"举报"}
            footer={null}
            width={486}
            forceRender={true}
        >
            <Container>
                {contextHolder}
                <StyledForm onSubmit={handleSub}>
                    <StyledLabel>
                        <p>举报内容</p>
                        <div>
                            <StyledTextArea
                                placeholder="请详细描述举报原因 (建议 10-200 字)"
                                value={formData.text}
                                onChange={handleChangeValue}
                                onInput={autoHeight}
                            />
                        </div>
                        <SubmitButton type="submit">提交举报</SubmitButton>
                    </StyledLabel>
                </StyledForm>
            </Container>
        </Modal>
    )
};

const StyledForm = styled.form`
  padding: 24px;
  background: #f8f9fa;
  border-radius: 8px;
`;

const StyledLabel = styled.label`
  display: flex;
  flex-direction: column;
  gap: 8px;
  
  p {
    font-size: 16px;
    color: #2d3436;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    
    &::before {
      content: '*';
      color: #ff7675;
      margin-right: 4px;
    }
  }
`;

const StyledTextArea = styled.textarea`
  width: 100%;
  min-height: 100px;
  padding: 12px;
  border: 1px solid #dfe6e9;
  border-radius: 4px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
  transition: all 0.3s ease;

  &:focus {
    border-color: #74b9ff;
    box-shadow: 0 0 0 2px rgba(116, 185, 255, 0.2);
    outline: none;
  }

  &::placeholder {
    color: #b2bec3;
  }
`;

const SubmitButton = styled.button`
  align-self: flex-end;
  padding: 8px 24px;
  background: #0984e3;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  margin-top: 16px;

  &:hover {
    background: #74b9ff;
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }

  &:disabled {
    background: #dfe6e9;
    cursor: not-allowed;
  }
`;


const Container = styled.div`
    font-size: 17px;
   .title{
        font-size: 30px;
        line-height: 36px;
        color: rgba(0,0,0,.85);
   }
   .text{
        margin-top: 14px;
        margin-bottom: 30px;
        line-height: 20px;
   }
   .login-switch{
        color: #79d8db;
        line-height: 20px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
   }
`;


export default ReportModal;
